import dayjs from "dayjs";
// 相对时间插件
import relativeTime from "dayjs/plugin/relativeTime";
// 国际化 - 中文
import "dayjs/locale/zh-cn";
import classnames from "classnames";
import style from "./index.module.scss";
import Icon from "@/components/Icon";
import { Image } from "antd-mobile";
// 启用相对时间
dayjs.extend(relativeTime);
// 启用中文
dayjs.locale("zh-cn");

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type: number;
  title: string;
  pubdate: string;
  comm_count: number;
  aut_name: string;
  art_id: string;
  images: string[];
};

const ArticleItem = ({
  type,
  title,
  pubdate,
  comm_count,
  aut_name,
  images,
}: Props) => {
  return (
    <div className={style.root}>
      <div
        className={classnames("article-info", type === 0 && "none-mt")}
        style={{ margin: "5px 0", borderBottom: "1px solid #ccc" }}
      >
        <div
          className={classnames(
            "article-content",
            type === 3 && "t3",
            type === 0 && "none-mt"
          )}
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
          }}
        >
          <p style={{ fontSize: "15px", height: "50px" }}>{title}</p>

          <div className="article-imgs" style={{ display: "flex" }}>
            {/* 渲染文章的封面图片 */}

            {images
              ? images.map((item, index) => (
                  <div key={index} className="article-img-wrapper">
                    <Image
                      src={item}
                      // 开启懒加载
                      lazy
                      alt=""
                      style={{
                        // width: "105px",
                        // height: "70px",
                        // display: "flex",
                        // margin: "5px 5px",
                        "--width": "110px",
                        "--height": "75px",
                      }}
                    />
                  </div>
                ))
              : null}
          </div>
        </div>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{dayjs().from(dayjs(pubdate))}</span>
        <span
          className="close"
          style={{
            display: "flex",
            justifyContent: "flex-end",
            alignItems: "center",
            marginTop: "-15px",
          }}
        >
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  );
};
export default ArticleItem;
